<template>
  <div class="singer-detail" v-if="singerDetail && fansCountMsg">
    <PlaylistHeader>{{ singerDetail.artist.name }}</PlaylistHeader>

    <!-- 大封面 -->
    <div
      class="singer-cover"
      :style="{ backgroundImage: `url(${singerDetail.artist.cover})` }"
    >
      <!-- 信息 -->
      <div class="msg">
        <!-- 头像和关注 -->
        <div class="top">
          <div class="left">
            <img :src="singerDetail.artist.cover" />
          </div>
          <div class="right" :class="{ follow_active: isFollow }">
            <span
              v-if="isFollow"
              @click="removeFollowSinger({ id: singerDetail.artist.id })"
            >
              -取关
            </span>
            <span
              v-else
              @click="addFollowSinger({ id: singerDetail.artist.id })"
            >
              +关注
            </span>
          </div>
        </div>

        <!-- 歌手名 -->
        <div class="middle">{{ singerDetail.artist.name }}</div>

        <!-- 指标 -->
        <div class="bottom">
          {{ fansCountMsg.fansCnt | parsePlayCount }}粉丝
        </div>
      </div>
    </div>

    <SingerDetailNavBar @changeActive="active = $event" />

    <!-- 动态组件 -->
    <DynamicComponent :is="component_name" />
  </div>
</template>

<script>
import SingerDetailNavBar from "@/components/nav/SingerDetailNavBar.vue";
import SingerHome from "@/components/DynamicComponent/singer/SingerHome.vue";
import SingerSong from "@/components/DynamicComponent/singer/SingerSong.vue";
import SingerAlbum from "@/components/DynamicComponent/singer/SingerAlbum.vue";
import SingerMv from "@/components/DynamicComponent/singer/SingerMv.vue";
import PlaylistHeader from "@/components/slot/headerbox/CustomHeader.vue";

import { mapMutations, mapState } from "vuex";

export default {
  name: "SingerDetail",
  components: {
    SingerDetailNavBar,
    SingerAlbum,
    SingerHome,
    SingerSong,
    SingerMv,
    PlaylistHeader,
  },
  methods: {
    /**
     * 获取歌手详情
     * @param id 歌手id
     */
    async getArtistDetail(id) {
      const res = await this.axios.get(`/artist/detail?id=${id}`);
      this.singerDetail = res.data.data;
    },

    /**
     * 获取歌手粉丝数量
     * @param id 歌手id
     */
    async getArtistFansCnt(id) {
      const res = await this.axios.get(`/artist/follow/count?id=${id}`);
      this.fansCountMsg = res.data.data;
    },

    ...mapMutations(["addFollowSinger", "removeFollowSinger"]),
  },

  created() {
    // 路由id
    const { id } = this.$route.query;

    // 看我看我
    const { getArtistDetail, getArtistFansCnt } = this;
    Promise.all([getArtistDetail(id), getArtistFansCnt(id)]);
  },
  data() {
    return {
      singerDetail: null,
      fansCountMsg: "",

      active: 1,

      // 初始化
      component_name: "SingerSong",
    };
  },
  watch: {
    // 切换动态组件
    active: {
      handler(index) {
        switch (index) {
          case 0:
            this.component_name = "SingerHome";
            break;
          case 1:
            this.component_name = "SingerSong";
            break;
          case 2:
            this.component_name = "SingerAlbum";
            break;
          case 3:
            this.component_name = "SingerMv";
            break;
        }
      },
      immediate: true,
    },
  },
  computed: {
    // 是否已关注歌手
    ...mapState(["followSingers"]),

    isFollow() {
      return this.followSingers.includes(this.singerDetail.artist.id);
    },
  },
};
</script>

<style lang="less" scoped>
.singer-detail {
  width: 100%;
  height: 100vh;
  overflow-y: scroll;

  .singer-cover {
    width: 100%;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 0;

    .msg {
      width: 95%;
      height: 150px;
      margin: 0 auto;
      color: #fff;
      font-weight: bolder;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .top {
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
          width: 60px;
          height: 100%;

          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 1px solid #fff;
          }
        }

        .right {
          width: 65px;
          height: 50%;
          background-color: #0aa0ff;
          color: #fff;
          font-weight: bold;
          text-align: center;
          line-height: 30px;
          border-radius: 10px;
          font-size: 13px;

          &.follow_active {
            background-color: transparent;
          }
        }
      }
    }
  }
}
</style>
